<script setup>

import CardBox from "@/components/CardBox/index.vue";
import {getStudent6211ScoreApi} from "@/api/school.js";
import TableRender from "@/components/TableRender/index.vue";

const state = reactive({
  boxIndex:0,
  queryParams: {
    pageNum: 1,
    pageSize: 5,
    learningType:1
  },
  yearList:[],
  dataList:[],
  total:0,
})
const getDataList = async () => {
  const res = await getStudent6211ScoreApi(state.queryParams)
  state.dataList = res.rows
  state.total = res.total
}

const resetSearch = () => {
  state.queryParams = {
    pageNum: 1,
    pageSize: 10
  }
  getDataList()
}

// 生成学年列表
const genderYearList = () => {
  // 往前生成4年 格式是：2024-2025
  let year = new Date().getFullYear() - 4;
  for (let i = 0; i < 4; i++) {
    state.yearList.push(year + '-' + (year + 1))
    year++
  }
}

const changeBoxIndex = (index) => {
  state.boxIndex = index;
  state.queryParams.learningType = index + 1
  getDataList()
}

onMounted(() => {
  getDataList()
  genderYearList()
})
</script>

<template>
  <div class="outBox">
<!--    <CardBox style="margin-bottom: 20px" title="筛选查询">-->
<!--      <template #btn-cont>-->
<!--        <el-button type="primary" @click="getDataList">查询</el-button>-->
<!--        <el-button @click="resetSearch">重置</el-button>-->
<!--      </template>-->
<!--      <template #content>-->
<!--        <el-form :model="state.queryParams" label-width="80" inline="true" ref="queryRef">-->
<!--          <el-row>-->
<!--            <el-form-item label="学年">-->
<!--              <el-select v-model="state.queryParams.year" placeholder="请选择" style="width: 150px;">-->
<!--                <el-option v-for="item in state.yearList" :key="item" :label="item" :value="item"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="学期">-->
<!--              <el-select v-model="state.queryParams.semester" placeholder="请选择学期" style="width: 150px;">-->
<!--                <el-option label="第一学期" value="第一学期"></el-option>-->
<!--                <el-option label="第二学期" value="第二学期"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-row>-->
<!--        </el-form>-->
<!--      </template>-->
<!--    </CardBox>-->
    <CardBox :titles="['6211成绩','智育成绩','奖学金']" @changeBoxIndex="changeBoxIndex">
      <template #content1>
        <div class="tableBox" v-for="item in state.dataList">
          <TableRender :json-data="item.jsonData"/>
        </div>
        <div class="pageBox">
          <pagination
              v-show="state.total > 0"
              :total="state.total"
              v-model:page="state.queryParams.pageNum"
              v-model:limit="state.queryParams.pageSize"
              @pagination="getDataList()"
              layout="'total, prev, pager, next, jumper'"
          />
        </div>
      </template>
      <template #content2>
        <div class="tableBox" v-for="item in state.dataList">
          <TableRender :json-data="item.jsonData"/>
        </div>
        <div class="pageBox">
          <pagination
              v-show="state.total > 0"
              :total="state.total"
              v-model:page="state.queryParams.pageNum"
              v-model:limit="state.queryParams.pageSize"
              @pagination="getDataList()"
              layout="'total, prev, pager, next, jumper'"
          />
        </div>
      </template>
      <template #content3>
        <div class="tableBox" v-for="item in state.dataList">
          <TableRender :json-data="item.jsonData"/>
        </div>
        <div class="pageBox">
          <pagination
              v-show="state.total > 0"
              :total="state.total"
              v-model:page="state.queryParams.pageNum"
              v-model:limit="state.queryParams.pageSize"
              @pagination="getDataList()"
              layout="'total, prev, pager, next, jumper'"
          />
        </div>
      </template>
    </CardBox>
  </div>
</template>

<style scoped lang="scss">
.tableBox{
  margin-bottom: 20px;
}
</style>
